<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>具名作用域插槽</title>
        <style>
            .base-layout {
                border: 1px solid blue;
            }

            .base-layout>header {
                height: 80px;
                background: #dfdfdf;
            }

            .base-layout>div {
                display: flex;
                height: 200px;
            }

            .base-layout aside {
                flex-basis: 20%;
                background: #99f;
            }

            .base-layout main {
                flex-basis: 80%;
                background: #f73;
            }

            .base-layout>footer {
                height: 80px;
                background: #ffff00;
            }
        </style>
    </head>
    <div>

        <h3>具名作用域插槽(Named Scoped Slots)</h3>

        <div id="application" v-cloak></div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>
        
        <script>

            const BaseLayout = {
                template: `<div class="base-layout">
                              <header>
                                <slot name="top" message="顶部">头</slot>
                              </header>
                              <div>
                                <aside>
                                    <slot name="left" message="中左">中左</slot>
                                </aside>
                                <main>
                                    <slot name="default" message="中右">中右</slot>
                                </main>
                              </div>
                              <footer>
                                <slot name="bottom" message="底部">脚</slot>
                              </footer>
                           </div>`
            }

            const App = {
                components: {
                    BaseLayout
                },
                template: `<BaseLayout>
                              <template #top="sp">
                                这里是{{sp.message}}
                              </template>
                              <template #left="sp">
                                这里是{{sp.message}}
                              </template>
                              <template #default="sp">
                                这里是{{sp.message}}
                              </template>
                              <template #bottom="sp">
                                这里是{{sp.message}}
                              </template>
                           </BaseLayout>`
            }

            Vue.createApp(App).mount('#application');
        </script>
    </div>
</html>